<template>
  <div id="main">
    <!-- 锚点 -->
    <div class="card">
      <el-button type="primary" size="medium"><a href="#dragg1">拖拽-1</a></el-button>
      <el-button type="primary" size="medium"><a href="#dragg2">拖拽-2</a></el-button>
      <el-button type="primary" size="medium"><a href="#dragg3">拖拽-3</a></el-button>
      <el-button type="primary" size="medium"><a href="#dragg4">拖拽-4</a></el-button>
      <el-button type="primary" size="medium"><a href="#dragg5">拖拽-5</a></el-button>
    </div>
    <!-- 拖拽-1  -------------------  效果 -->
    <el-divider id="dragg1"></el-divider>
    <el-card class="box-card">
      <div slot="header">拖拽-1</div>
      <dragg1></dragg1>
    </el-card>
    <!-- 拖拽-2  -------------------  效果 -->
    <el-divider id="dragg2"></el-divider>
    <div class="box-card">
      <dragg2></dragg2>
    </div>

    <!-- 拖拽-3  -------------------  效果 -->
    <el-divider id="dragg3"></el-divider>
    <el-card class="box-card">
      <div slot="header">拖拽-3</div>
      <dragg3></dragg3>

    </el-card>

  </div>
</template>

<script>
import dragg1 from '@/components/draggable/draggable1/domes/dragg1.vue'
import dragg2 from '@/components/draggable/draggable1/domes/dragg2.vue'
import dragg3 from '@/components/draggable/draggable1/domes/dragg3.vue'

export default {
  components: { dragg1, dragg2, dragg3 },
  data() {
    return { }
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: { }

}

</script>

<style scoped>
.card {
  width: 10%;
  height: 75%;
  background: #eee;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #888;
  position: fixed;
  top: 150px;
  right: 50px;
  z-index: 10;
}

.box-card {
  height: 300px;
  width: 85%;
  margin-bottom: 20px;
  border: 1px solid red;
}
</style>